<template>
  <div>
    <div >
      <div class="profile-cover text-center">
        <img class="img-fluid " src="http://localhost:3001/file/background.png" alt="" >
      </div>
      <div class="container">
        <div class="row">
          <!-- Main Content -->
          <aside class="col col-xl-3 order-xl-1 col-lg-12 order-lg-1 col-12">
            <leftTop :userInfo="userInfo"></leftTop>
            <leftCemter></leftCemter>
            <leftFotter></leftFotter>
          </aside>
          <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-2 col-md-12 col-sm-12 col-12">
            <about-you :userInfo="userInfo"></about-you>
            <message-board></message-board>
            <aboutMoodList></aboutMoodList>
          </main>
          <aside class="col col-xl-3 order-xl-3 col-lg-12 order-lg-3 col-12">
            <hot-topic></hot-topic>
            <hot-activity></hot-activity>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftTop from '@/components/profile/leftAside/top.vue';
import leftCemter from '@/components/profile/leftAside/center.vue';
import leftFotter from '@/components/profile/leftAside/fotter.vue';
import aboutYou from '@/components/profile/center/aboutYou.vue';
import aboutMoodList from '@/components/profile/center/aboutMoodList.vue';
import messageBoard from '@/components/profile/center/messageBoard.vue';
import HotActivity from '@/components/common/hotActivity.vue';
import HotTopic from '@/components/common/hotTopic.vue';

export default {
  data() {
    return {
      getUserStore: this.newStore(),
      userInfo: {},
    };
  },
  components: {
    leftFotter,
    leftTop,
    leftCemter,
    aboutYou,
    aboutMoodList,
    messageBoard,
    HotActivity,
    HotTopic,
  },
  created() {
    this.spost(this.getUserStore, "/getProfileInfo", {
      userId: this.$store.state.userInfo.userid,
    }).then((res) => {
      this.userInfo = res.d.data;
    });
  },
};
</script>

<style scoped lang="scss">

</style>
